<template>
  <div class="app-container">
    <div style="overflow:hidden">
      <addDialog v-if="dialogShow" @close="close" @update="getList" :id="id"></addDialog>
      <el-button type="primary" icon="el-icon-plus" style="float:left;margin-left:10px" @click="createRole">新增</el-button>
      <el-button type="primary" icon="el-icon-search" style="float:right;margin-left:10px" @click="getList">查询</el-button>
      <el-form style="float:right">
        <el-form-item label="角色名称" label-width="120px" class="input">
          <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="roleData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="name"            label="名称"         width="120"></el-table-column>
      <el-table-column prop="description"            label="描述"         min-width="200"></el-table-column>
      <el-table-column prop="creator"            label="创建人"         width="100"></el-table-column>
      <el-table-column prop="dateCreated"            label="创建时间"         min-width="130"></el-table-column>
      <el-table-column label="操作"       width="250">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini" @click="editRole(scope.row)">修改</el-button> -->
          <el-button type="danger" size="mini" @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size">
      </el-pagination>
    </div>
  </div>  
</template>
<script>
import { roleList, deleteRole } from 'api/system'
import { handlePagination } from 'mixins/index.js'
import addDialog from './components/addDialog'
export default {
  components: {
    addDialog
  },
  mixins: [handlePagination],
  data() {
    return {
      roleData: [],
      roleName: '',
      dialogShow: false,
      id: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const parm = {
        pageSize: this.pageSize,
        curPage: this.curPage - 1,
        roleName: this.roleName
      }
      try {
        let back = await roleList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.roleData = back.result
          this.size = back.size
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    async deleteRole(row) {
      try {
        let back = await deleteRole(row.roleId)
        back = back.data
        if (back.resultCode === '200') {
          this.$alert('角色删除成功', '提示')
          this.getList()
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    createRole() {
      this.id = ''
      this.dialogShow = true
    },
    editRole(row) {
      this.id = row.id
      this.dialogShow = true
    },
    close() {
      this.dialogShow = false
    }
  }
}
</script>
<style scoped>
  .block{
    float: right;
    margin-top:20px;
  }
  .input{
    float: left;
  }
</style>

